import React, {Component} from 'react'
import { connect } from 'dva';
import { Flex, WhiteSpace, SearchBar } from 'antd-mobile';
import SearchingTag from '../components/SearchingTag'
import Footer from '../components/Footer'
import styles from './Searching.css';

class Searching extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value:'',
      /*热门搜索数据list*/
      searchhits:[
        'python',
        'attandung',
        '医学医用',
        'Artificial Intelligence',
        '人工智能',
        'angel'
      ],
      /*历史搜索数据list*/
      searchhistory:[
        'dreaming',
        'ugg',
        'RNGRoyalNeverGiveUP',
        '张国荣',
        'Tina'
      ]
    }
  }
  onChange(val){
    console.log(val)
    console.log('i am changing')
  }
  render(){
    const hitsdata = this.state.searchhits;
    const historydata = this.state.searchhistory;
    const hitlist = hitsdata.map((hitsdata) =>
      <div className={styles.tagbox} key={hitsdata.toString()}>
        <SearchingTag text={hitsdata}/>
      </div>
    );
    const historylist = historydata.map((historydata) =>
      <div className={styles.tagbox} key={historydata.toString()}>
        <SearchingTag text={historydata}/>
      </div>
    );
    return (
      <div>
        <div className={styles.searchbar}>
          <SearchBar
          //value={this.state.value}
          placeholder="搜索"
          // onSubmit={value => console.log(value, 'onSubmit')}
          // onClear={value => console.log(value, 'onClear')}
          // onFocus={() => console.log('onFocus')}
          onBlur={() => console.log('onBlur')}
          onCancel={() => console.log('onCancel')}
          showCancelButton
          onChange={this.onChange}
        />
        </div>
        <div className={styles.flexcontainer}>
          <div className={styles.subtitle}>热门搜索</div>
          <Flex wrap="wrap">
            {hitlist}
          </Flex>
          <WhiteSpace size="sm" />
          <div className={styles.subtitle}>搜索历史</div>
          <Flex wrap="wrap">
            {historylist}
          </Flex>
        </div>
        {/*temp footer*/}
        <Footer />
      </div>
    );
  }
}

Searching.propTypes = {
};
// function mapStateToProps(state) {
//   return {
//   }
// }
export default connect()(Searching);
